<template>
	<div>
		<section v-for="(v,k,index) in obj" :key="index">
			<h3 style="border: 1px solid; margin-top: 10px;height: 50px;line-height: 50px;">{{k}}</h3>
			<ul>
				<li v-for="item in v" :key="item.id">{{item.name}}</li>
			</ul>
		</section>
	</div>
</template>

<script>
	import { fetch } from '@/utils'
	export default {
		data() {
			return {
				obj: {}
			}
		},

		created() {
			this.getList();
		},

		methods: {
			getList() {
				const url = '/v4/api/cinema';
				const data = {};
				fetch(url, data, (res) => {
					this.obj = this.installArr(res.cinemas);
				})
			},

			installArr(list) {
				let set = new Set();
				for(let item of list) {
					set.add(item.district.name);
				}

				let obj = {};
				for(let s of set) {
					obj[s] = list.filter((item) => {
						return item.district.name === s;
					})
				}
				return obj;
			}
		}
	}
</script>

<style>

</style>